<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="stylesheet" href="../css/productlist.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    

</head>

<body> 
    <!-- 头部 -->
    <div class="header">
        <div class="heade">
            <img src="https://img2.baidu.com/it/u=3358499922,3886392213&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=700" alt="">
             <span>kk</span>
        </div>
        <div class="logo">
            <img src="https://s0.meituan.net/bs/fe-web-meituan/10afbf1/img/logo.png" alt="">
        </div>
        <form action="">
            <input type="text" placeholder="搜素商家或地点"><button>搜素</button>
        </form>
        <span class="cart">查看购物车</span>
        <div class="deng">
            <p class="login1">登录</p>
            <p class="sign1">注册</p>
            <p class="logout">退出</p>
        </div>
    </div>
    <!-- 登录界面 -->
   <div class="login-sign login">
    <form class="form1">
        用户名：<input type="text" class="login-username" placeholder="请输入用户名">
        <p class="usn"></p>
        密&emsp;码：<input type="password" class="login-password" placeholder="请输入密码">
        <p class="psw"></p>
        <input type="submit" id="login-confirm" value="登录">
        <span>X</span>
    </form>
   </div>
    <!-- 注册界面 -->
    <div class="login-sign sign">
        <form action="">
            用户名：<input type="text" class="sign-username" placeholder="请输入用户名">
            <p class="usn"></p>
            密&emsp;码：<input type="password" class="sign-password" placeholder="请输入密码">
            <p class="psw"></p>
            昵&emsp;称：<input type="text" class="name" placeholder="请输入昵称">
            <p class="sign"></p>
            时&emsp;间：<input type="text" class="time" placeholder="请输入时间">
            <p></p>
            头&emsp;像: <input type="text" class="sign-heading" placeholder="请传入图片">
            <p class="head"></p>
            <input type="button" id="confirm" value="注册">
            <span>X</span>
            
        </form>
    </div>
    <!-- 导航 -->
    <div class="nav-t">
    <ol>
        <li class="active">美团外卖</li>
        <li class="out">猫眼电影</li>
        <li>美团酒店</li>
        <li>名宿/公寓</li>
        <li>商家入驻</li>
        <li>美图公益</li>
    </ol>
    </div>
    <!-- 导航轮播部分 -->
    <div class="nav-banner">
        <div class="nav">
            <h2>全部分类</h2>
            <p>美食</p>
            <p>外卖</p>
            <p>酒店</p>
            <p>民宿</p>
            <p>猫眼电影</p>
            <p>机票/火车票</p>
            <p>休闲娱乐/KTV</p>
            <p>生活服务</p>
            <p>丽人/美发/医学美容</p>
            <p>结婚│婚纱摄影│婚宴</p>
            <p>亲子/儿童乐园/幼教</p>
            <p>运动健身/健身中心</p>
            <p>家装/建材/家居</p>
            <p>学习培训/音乐培训</p>
            <p>医疗健康/宠物/爱车</p>
            <p>酒吧/密室逃脱</p>
        </div>
       
            <div class="swiper">
                <div class="swiper-wrapper">
                   <div class="swiper-slide"> <img src="https://img13.360buyimg.com/seckillcms/s280x280_jfs/t1/130058/24/25986/146894/62319c83Eeeddeec0/f7ca5ce56304c158.jpg.webp" alt=""> </div>
                    <div class="swiper-slide"> <img src="https://img10.360buyimg.com/pop/s380x300_jfs/t1/212452/35/14324/135295/622aefebE6e7f163e/401af10a2a8677ee.jpg.webp" alt=""></div>
                    <div class="swiper-slide"> <img src="https://img11.360buyimg.com/babel/s380x300_jfs/t1/156373/29/12285/68780/603f2b75E4fd09458/a6aa23f1163ff561.jpg.webp" alt=""></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
    </div>

<!-- 商品列表 -->
    <div class="container">
       <!-- <div class="item">
            <img src="http://img.alicdn.com/bao/uploaded/i1/2003255563/O1CN01mRzn2r1qxttapgfqG_!!0-item_pic.jpg" alt="">
            <p>江西辣典100了好吃好吃</p>
            <p class="price">￥<span>6</span></p>
        </div> -->
    </div>
    <div class="more-wrapper">
        <button class="more">查看更多</button>
    </div>

    <!-- 页脚 -->
    <footer>  
        <img src="https://s0.meituan.net/bs/fe-web-meituan/10afbf1/img/logo.png" alt="">
        <p>点外卖，选美团</p>
    <button class="back">回到顶部</button>
    </footer>

    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/productlist.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>

    <script>
        var mySwiper = new Swiper('.swiper', {
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            effect: 'fade',
            autoplay: true, //等同于以下设置
        })
    </script>
</body>

</html>